@model VotingSystem.ViewModels.SurveyCreateViewModel

@{
    ViewData["Title"] = "编辑问卷";
}

<div class="container py-4">
    <div class="row">
        <div class="col-md-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h2 class="card-title mb-4">
                        <i class="fas fa-edit text-primary me-2"></i>编辑问卷
                    </h2>
                    <form asp-action="Edit" id="surveyForm">
                        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                        <input type="hidden" asp-for="Id" />

                        <div class="mb-4">
                            <div class="form-group">
                                <label asp-for="Title" class="form-label">问卷标题</label>
                                <input asp-for="Title" class="form-control" placeholder="请输入问卷标题" />
                                <span asp-validation-for="Title" class="text-danger"></span>
                            </div>
                        </div>

                        <div class="mb-4">
                            <div class="form-group">
                                <label asp-for="Description" class="form-label">问卷说明</label>
                                <textarea asp-for="Description" class="form-control" rows="3" placeholder="请输入问卷说明"></textarea>
                                <span asp-validation-for="Description" class="text-danger"></span>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input asp-for="IsPublic" class="form-check-input" type="checkbox" />
                                    <label asp-for="IsPublic" class="form-check-label">公开问卷</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-switch">
                                    <input asp-for="IsAnonymous" class="form-check-input" type="checkbox" />
                                    <label asp-for="IsAnonymous" class="form-check-label">匿名问卷</label>
                                </div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <h4 class="mb-3">问题列表</h4>
                            <div id="questionsContainer">
                                @for (var i = 0; i < Model.Questions.Count; i++)
                                {
                                    <div class="card mb-3 question-card" data-question-index="@i">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-start mb-3">
                                                <h5 class="card-title mb-0">问题 @(i + 1)</h5>
                                                <button type="button" class="btn btn-outline-danger btn-sm remove-question">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                            </div>

                                            <input type="hidden" asp-for="@Model.Questions[i].Id" />
                                            <input type="hidden" asp-for="@Model.Questions[i].Order" class="question-order" value="@i" />

                                            <div class="mb-3">
                                                <label class="form-label">问题内容</label>
                                                <input asp-for="@Model.Questions[i].QuestionText" class="form-control" placeholder="请输入问题内容" />
                                                <span asp-validation-for="@Model.Questions[i].QuestionText" class="text-danger"></span>
                                            </div>

                                            <div class="row mb-3">
                                                <div class="col-md-4">
                                                    <label class="form-label">问题类型</label>
                                                    <select asp-for="@Model.Questions[i].Type" class="form-select question-type">
                                                        <option value="0">单选题</option>
                                                        <option value="1">多选题</option>
                                                        <option value="2">填空题</option>
                                                        <option value="3">评分题</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-check form-switch mt-4">
                                                        <input asp-for="@Model.Questions[i].IsRequired" class="form-check-input" type="checkbox" />
                                                        <label asp-for="@Model.Questions[i].IsRequired" class="form-check-label">必答题</label>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="options-container">
                                                @for (var j = 0; j < Model.Questions[i].Options.Count; j++)
                                                {
                                                    <div class="input-group mb-2 option-item">
                                                        <input type="hidden" asp-for="@Model.Questions[i].Options[j].Id" />
                                                        <input type="hidden" asp-for="@Model.Questions[i].Options[j].Order" class="option-order" value="@j" />
                                                        <input asp-for="@Model.Questions[i].Options[j].OptionText" class="form-control" placeholder="请输入选项内容" />
                                                        <button type="button" class="btn btn-outline-danger remove-option">
                                                            <i class="fas fa-times"></i>
                                                        </button>
                                                    </div>
                                                }
                                            </div>

                                            <div class="mt-3">
                                                <button type="button" class="btn btn-outline-primary btn-sm add-option">
                                                    <i class="fas fa-plus me-1"></i>添加选项
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                }
                            </div>

                            <div class="mt-3">
                                <button type="button" class="btn btn-primary" id="addQuestion">
                                    <i class="fas fa-plus me-1"></i>添加问题
                                </button>
                            </div>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i>保存问卷
                            </button>
                            <a asp-action="Index" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i>返回列表
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        $(document).ready(function() {
            // 添加问题
            $('#addQuestion').click(function() {
                var questionIndex = $('.question-card').length;
                var questionHtml = `
                    <div class="card mb-3 question-card" data-question-index="${questionIndex}">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <h5 class="card-title mb-0">问题 ${questionIndex + 1}</h5>
                                <button type="button" class="btn btn-outline-danger btn-sm remove-question">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </div>

                            <input type="hidden" name="Questions[${questionIndex}].Order" class="question-order" value="${questionIndex}" />

                            <div class="mb-3">
                                <label class="form-label">问题内容</label>
                                <input name="Questions[${questionIndex}].QuestionText" class="form-control" placeholder="请输入问题内容" required />
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label class="form-label">问题类型</label>
                                    <select name="Questions[${questionIndex}].Type" class="form-select question-type">
                                        <option value="0">单选题</option>
                                        <option value="1">多选题</option>
                                        <option value="2">填空题</option>
                                        <option value="3">评分题</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-check form-switch mt-4">
                                        <input name="Questions[${questionIndex}].IsRequired" class="form-check-input" type="checkbox" />
                                        <label class="form-check-label">必答题</label>
                                    </div>
                                </div>
                            </div>

                            <div class="options-container">
                                <div class="input-group mb-2 option-item">
                                    <input type="hidden" name="Questions[${questionIndex}].Options[0].Order" class="option-order" value="0" />
                                    <input name="Questions[${questionIndex}].Options[0].OptionText" class="form-control" placeholder="请输入选项内容" />
                                    <button type="button" class="btn btn-outline-danger remove-option">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="mt-3">
                                <button type="button" class="btn btn-outline-primary btn-sm add-option">
                                    <i class="fas fa-plus me-1"></i>添加选项
                                </button>
                            </div>
                        </div>
                    </div>
                `;
                $('#questionsContainer').append(questionHtml);
                updateQuestionNumbers();
            });

            // 删除问题
            $(document).on('click', '.remove-question', function() {
                $(this).closest('.question-card').remove();
                updateQuestionNumbers();
            });

            // 添加选项
            $(document).on('click', '.add-option', function() {
                var questionCard = $(this).closest('.question-card');
                var questionIndex = questionCard.data('question-index');
                var optionIndex = questionCard.find('.option-item').length;
                var optionHtml = `
                    <div class="input-group mb-2 option-item">
                        <input type="hidden" name="Questions[${questionIndex}].Options[${optionIndex}].Order" class="option-order" value="${optionIndex}" />
                        <input name="Questions[${questionIndex}].Options[${optionIndex}].OptionText" class="form-control" placeholder="请输入选项内容" />
                        <button type="button" class="btn btn-outline-danger remove-option">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                `;
                questionCard.find('.options-container').append(optionHtml);
            });

            // 删除选项
            $(document).on('click', '.remove-option', function() {
                $(this).closest('.option-item').remove();
                updateOptionOrders();
            });

            // 更新问题编号
            function updateQuestionNumbers() {
                $('.question-card').each(function(index) {
                    $(this).find('.card-title').text('问题 ' + (index + 1));
                    $(this).data('question-index', index);
                    $(this).find('input, select').each(function() {
                        var name = $(this).attr('name');
                        if (name) {
                            $(this).attr('name', name.replace(/Questions\[\d+\]/, 'Questions[' + index + ']'));
                        }
                    });
                });
            }

            // 更新选项顺序
            function updateOptionOrders() {
                $('.question-card').each(function() {
                    $(this).find('.option-item').each(function(index) {
                        $(this).find('.option-order').val(index);
                        var name = $(this).find('input[type="text"]').attr('name');
                        if (name) {
                            $(this).find('input[type="text"]').attr('name', name.replace(/Options\[\d+\]/, 'Options[' + index + ']'));
                        }
                    });
                });
            }

            // 问题类型改变时的处理
            $(document).on('change', '.question-type', function() {
                var type = $(this).val();
                var optionsContainer = $(this).closest('.question-card').find('.options-container');
                if (type === '2' || type === '3') { // 填空题或评分题
                    optionsContainer.hide();
                } else {
                    optionsContainer.show();
                }
            });

            // 初始化问题类型
            $('.question-type').each(function() {
                var type = $(this).val();
                var optionsContainer = $(this).closest('.question-card').find('.options-container');
                if (type === '2' || type === '3') {
                    optionsContainer.hide();
                }
            });
        });
    </script>
} 